<template>
 <div class="add-form">
 <el-dialog  :visible.sync="dialogFormVisible" :title="titleInfo.text+titleInfo.pageTitle" >
      <el-form ref="dataForm" :model="formBase" :rules="rules" size="medium" label-width="150px" label-position="left"  style="width: 80%; margin-left:10px;">

        <el-form-item label="所属学科" prop="subjectID">
            <!-- @change="handleSubjectName" -->
         <el-select
            v-model="formBase.subjectID"
            placeholder="请选择"
            @keyup.enter="handleFilter"
            clearable 
            :style="{width: '100%'}"
          >
         <el-option
                      v-for="(item,index) in CourseCatalogue"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
  </el-select>
        </el-form-item>
          <el-form-item label="目录名称" prop="tagName">
          <el-input v-model="formBase.tagName" placeholder="请输入目录名称" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormH">取消</el-button>
        <el-button type="primary" @click="createData">确定</el-button>
      </div>
    </el-dialog>


</div>
</template>

<script>
import {update, add ,list} from '@/api/hmmm/tags.js'
import {simple} from '../../api/hmmm/subjects.js'
export default {
name: 'TagsAdd',
  props:{
  titleInfo: {
      type: Object,
      required: true
    },
    formBase: {
         type: Object,
      required: true
      },
  
    },
data() {
  return {
    dialogFormVisible:false,
   CourseCatalogue:[],
 
    // 表单验证
    rules: {
        subjectName: [{
          required: true,
          message: '请选择',
          trigger: 'blur'
        }],
        tagName:[{
          required: true,
          message: '请输入目录名称',
          trigger: 'blur'
        }],
      },
 

  }
  
},
created() {
  this.getCourseCatalogue()
},
methods:{
   // 弹层显示
    dialogFormV () {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false
    },
// 获取简单学科目录
    async getCourseCatalogue () {
      const res = await simple()
      // console.log(res)
      this.CourseCatalogue = res.data
      // console.log(CourseCatalogue)
    },

  // 表单提交
// createData(){
//   this.$refs.dataForm.validate(async valid =>{
//     if(valid) {
//    this.dialogFormH()
//          console.log(this.formData);
//        const data = {
//             ...this.formData
//           }
//           if(this.formData.id){
//             await update(data).then(() => {
//               this.$emit('newDataes', this.formData)
//             })
//           } else {
//             // console.log(this.formData);
//             await add(this.formData).then(() => {
//               this.$emit('newDataes', this.formData)
//             })
//           }        
//     }else {
//       this.$message.error('请完整填写！')
//     }

//   })
// }

createData(){
  this.$refs.dataForm.validate(async valid =>{
    if(valid) {
   this.dialogFormH()

       const data = {
            ...this.formBase
          }
          if(this.formBase.id){
            await update(data).then(()=>{
              this.$emit('newDataes',this.formBase)
               this.$message.success("操作成功！")
            })
          } else {
            await add(this.formBase).then(()=>{
              this.$emit('newDataes',this.formBase)
              this.$message.success("操作成功！")
            })
          }        
    }else {
      this.$message.error('学科名称为必填项!')
    }
 
  })
}





}

}
</script>

<style scoped lang='less'></style>
